<template>
  <div class="app-container">
    <div style="margin-bottom: 55px;">
      <el-row style="padding-top: 10px" class="v-deep">
        <el-col :span="24" :xs="24">
          <el-collapse v-model="activeNames2">
            <el-collapse-item name="1">
              <template slot="title">
                <div>订单信息</div>
              </template>
              <div style="padding: 5px">
                <el-form ref="detailForm" v-model="detailForm" label-position="right" label-width="120px" size="small" disabled="disabled">
                  <el-row :gutter="10">
                    <el-col :span="6">
                      <el-form-item label="订单号:" prop="orderNo">
                        <el-input v-model="detailForm.orderNo" placeholder="订单号" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="客户编码:" prop="buyerCode">
                        <el-input v-model="detailForm.buyerCode" placeholder="客户编码" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="客户名称:" prop="buyerName">
                        <el-input v-model="detailForm.buyerName" placeholder="客户名称" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="账单条款:" prop="termsName">
                        <el-input v-model="detailForm.termsName" placeholder="账单条款" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="10">
                    <el-col :span="6">
                      <el-form-item label="订单类型:" prop="orderTypeName">
                        <el-input v-model="detailForm.orderTypeName" placeholder="订单类型" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="销售员:" prop="saleName">
                        <el-input v-model="detailForm.saleName" placeholder="销售员" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="是否含税:" prop="isTaxName">
                        <el-input v-model="detailForm.isTaxName" placeholder="是否含税" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="联系人:" prop="contractName">
                        <el-input v-model="detailForm.contractName" placeholder="联系人" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="币别:" prop="currencyName">
                        <el-input v-model="detailForm.currencyName" placeholder="币别" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="税码:" prop="taxCode">
                        <el-input v-model="detailForm.taxCode" placeholder="税码" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="税率:" prop="taxRate">
                        <el-input v-model="detailForm.taxRate" placeholder="税率" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="总价:" prop="totalAmount">
                        <el-input v-model="detailForm.totalAmount" placeholder="总价" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="10">
                    <el-col :span="12">
                      <el-form-item label="备注:" prop="remark">
                        <el-input v-model="detailForm.remark" placeholder="备注" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-col>
      </el-row>
      <el-row style="padding-top: 10px" class="v-deep">
        <el-col :span="24" :xs="24">
          <el-collapse v-model="activeNames">
            <el-collapse-item name="1" >
              <template slot="title">
                <div>订单明细</div>
              </template>
              <div style="padding: 5px" class="low-height-th-table">
                <el-table
                  border
                  stripe
                  default-expand-all
                  ref="tableRef"
                  v-loading="loading"
                  :data="tSalOrderEntryList"
                  :header-cell-style= "{
                    'font-size': '12px !important',
                    'font-weight': '500 !important',
                    'color':'#FFF',
                    'padding': '0px 0',
                    'background-color':'rgb(51 112 255 / 80%)',
                    textAlign: 'left',
                    'height': '30px !important'
                  }"
                  :cell-style="{ padding: '8px 10px 8px 0', textAlign: 'left' }"
                  highlight-current-row style="width: 100%;"
                  height="385px"
                >
                  <el-table-column type="selection" width="55" align="center" />
                  <el-table-column label="序号" align="center" prop="index" width="60">
                    <template slot-scope="scope">{{scope.$index+1}}</template>
                  </el-table-column>
<!--                  <el-table-column label="公司" prop="siteName" width="150">-->
<!--                  </el-table-column>-->
                  <el-table-column label="行号" prop="lineNo" width="80">
                  </el-table-column>
                  <el-table-column label="物料编号" prop="productCode" width="150">
                  </el-table-column>
                  <el-table-column label="物料名称" prop="productName" width="150">
                  </el-table-column>
                  <el-table-column label="单位" prop="unit" width="80">
                  </el-table-column>
                  <el-table-column label="数量" prop="orderQty" width="100">
                  </el-table-column>
                  <el-table-column label="单价(含税)" prop="price" width="100">
                  </el-table-column>
                  <el-table-column label="税率" prop="taxRate" width="100">
                  </el-table-column>
                  <el-table-column label="税额" prop="tax" width="100">
                  </el-table-column>
                  <el-table-column label="金额(含税)" prop="amount" width="150">
                  </el-table-column>
                  <el-table-column label="已发货数量" prop="qtyShipped" width="100">
                  </el-table-column>
                  <el-table-column label="已开票数量" prop="qtyInvoiced" width="100">
                  </el-table-column>
                  <el-table-column label="到期日期" prop="dueDate" width="160">
                    <template slot-scope="scope">
                      {{scope.row.dueDate}}
                    </template>
                  </el-table-column>
                  <el-table-column label="订购状态" prop="orderStatusName" width="150">
                  </el-table-column>
                  <div slot="empty">
                    <svg-icon icon-class="search-none" style="font-size: 64px;" />
                    <p>暂无数据</p>
                  </div>
                </el-table>
<!--                <div>-->
<!--                  <div style="margin-top: 5px;margin-bottom: 5px;float: right;">-->
<!--                    <el-radio-group v-model="isWithout" size="mini">-->
<!--                      <el-radio-button label="含税"></el-radio-button>-->
<!--                      <el-radio-button label="不含税"></el-radio-button>-->
<!--                    </el-radio-group>-->
<!--                  </div>-->
<!--                </div>-->
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-col>
      </el-row>
    </div>
    <div style="position: fixed;z-index: 999;bottom: 0px;width: 100%;margin-top: 16px;box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 12px 4px;">
      <div style="display: flex;height: 56px;background-color: #FFFF;">
        <div style="width: 100px;padding: 15px 28px;background-color: #3370ff;color: #FFF;font-size: 20px;font-weight: 600;">
          <span>合计</span>
        </div>
        <div style="display: flex;flex-grow: 1;align-items: center;">
          <div style="width: 350px;padding: 0 15px;">
            <svg-icon icon-class="with-tax2" style="color: rgb(255, 165, 71);    font-size: 18px;"/>  金额(含税)
            <span style="font-weight: 800; margin-left: 5px">
              ¥{{detailForm.totalAmount | formatCurrency}}
            </span>
          </div>
<!--          <div style="width: 300px;padding: 0 15px;">-->
<!--            <svg-icon icon-class="tax"style="color: rgb(41, 180, 240);    font-size: 18px;" />  税额-->
<!--            <span style="font-weight: 800; margin-left: 5px">-->
<!--              ¥{{detailForm.tax | formatCurrency}}-->
<!--            </span>-->
<!--          </div>-->
<!--          <div style="width: 250px; padding: 0 15px;">-->
<!--            <el-button @click="preInvoice(detailForm.settleId)">上一张</el-button>-->
<!--            <el-button @click="nextInvoice(detailForm.settleId)" type="primary">下一张</el-button>-->
<!--          </div>-->
        </div>
      </div>
    </div>

  </div>

</template>
<style lang="scss">
  .input_num .el-input__inner{
    padding: 0 0 0 15px !important;
    color: red;
    font-weight: 700;
  }
  .el-table .warning-row {
    background: oldlace;
  }
  .el-table .success-row {
    background: #f0f9eb;
  }
  .el-card__body, .el-main {
    padding: 5px 20px !important;
  }

  .collapse-title{
    background-color: red;
  }
  .el-collapse-item__header.is-active {
    border-bottom: 1px solid #f0f2f5 !important;
  }
  .el-collapse-item__header::before{
    content: "";
    display: block;
    width: 3px;
    height: 20px;
    position: absolute;
    background-color: #297cf0;
    left: 0px;
    top: 35px;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  .el-collapse-item__header div{
    margin-left: 10px;
  }
  .el-form-item__label{
    margin-bottom: -12px;
  }

  .v-deep{
    .el-collapse-item__arrow {
      width: 40px;
    }
    .el-icon-arrow-right:before {
      content: "展开";
      font-size: 14px;
      font-family: 'heiti';
      color: #2295ff;
    }
    .el-collapse-item__arrow.is-active {
      transform: none;
    }
    .el-collapse-item__arrow.is-active::before {
      content: "收起";
      font-size: 14px;
      font-family: 'heiti';
      color: #2295ff;
    }
    .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
      margin-bottom: 8px;
    }
  }

  .el-descriptions__header{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 5px !important;
    margin-top: 5px;
  }
  .el-descriptions__title::before{
    content: "";
    display: block;
    width: 3px;
    height: 20px;
    position: absolute;
    background-color: #297cf0;
    left: 0px;
    margin-top: 11px;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .invoice-type {
    font-size: 12px;
    font-weight: 500;
    border: 2px solid;
    padding: 2px 6px;
    color: hsl(158deg 86% 34%);
    border-radius: 4px;
  }
  .invoice-type::before,
  .invoice-type::after {
    position: absolute;
    content: '';
    width: 6px;
    height: 6px;
    background-color: #fff;
    border: 2px solid hsl(158deg 86% 34%);
    border-left-color: transparent;
    border-bottom-color: transparent;
    border-radius: 50%;
    margin-top: 10px;
  }

  .invoice-type::before {
    margin-left: -10px;
    transform: rotate(45deg);
  }

  .invoice-type::after {
    margin-left: 3px;
    transform: rotate(-135deg);
  }

</style>

<script>
    import { listOrder, getOrder, delOrder, addOrder, updateOrder } from "@/api/doc/order";

import Viewer from 'v-viewer';
export default {
    name: "Order",
    dicts: ['is_tax', 'currency_code', 'order_type', 'terms_code'],
    data() {
        return {
            activeNames: ['1'],
            activeNames2: ['1'],
            detailForm:{},
            loading:false,
            tSalOrderEntryList:[],
            isWithout:'含税',
            invoiceOpen:false,
            options:{
                zIndex: 99999,
                inline: true,
                button: true,
                navbar: true,
                title: true,
                toolbar: true,
                tooltip: true,
                movable: true,
                zoomable: true,
                rotatable: true,
                scalable: true,
                transition: true,
                fullscreen: false,
                keyboard: true,
                url: 'data-source'
            }
        };
    },
    created() {
        // 获取订单号
        let orderNo = this.$route.params && this.$route.query.orderNo;
        console.log("获取订单号：" + orderNo);
        this.init(orderNo);
    },
    methods: {
        init(orderNo){
            this.$modal.loading("正在初始化，请稍候...");
            getOrder(orderNo).then(response => {
                if(response.data){
                    this.detailForm = response.data;
                    this.tSalOrderEntryList = response.data.tsalOrderEntryList;
                } else {
                    this.$modal.msgError("没有对应的销售订单");
                }
                this.$modal.closeLoading();
            });
        },

        handleOpenInvoice() {
            this.invoiceOpen = true;
            // TODO 获取附件

        },

        nextInvoice(settleId){
            this.$modal.loading("正在初始化，请稍候...");
            getNextInvoice(settleId).then(response => {
                if(response.data){
                    this.detailForm = response.data;
                    this.tSalOrderEntryList = response.data.tsctSalOrderEntryList;
                } else {
                    this.$modal.msgWarning("没有下一个票据");
                }
                this.$modal.closeLoading();
            });
        },

        preInvoice(settleId){
            this.$modal.loading("正在初始化，请稍候...");
            getPreInvoice(settleId).then(response => {
                if(response.data){
                    this.detailForm = response.data;
                    this.tSalOrderEntryList = response.data.tsctSalOrderEntryList;
                } else {
                    this.$modal.msgWarning("没有上一个票据");
                }
                this.$modal.closeLoading();
            });
        },
        /** 返回至列表页 */
        back(){
            //关闭当前页
            this.$store.dispatch("tagsView/delView", this.$route);
            this.$router.push({path:'/sal/settle/settlebill/'})
        },
        /** 拆分按钮操作 */
        handleSplit() {
            const settleId = this.detailForm.id;
            // 需要另新增一个标签页
            this.$router.push({path:'/doc/settlebill/split/' + settleId,query:{settleId:settleId, date:new Date().getTime()}})
        },
        /** 复制代码成功 */
        clipboardSuccess() {
            this.$modal.msgSuccess("复制成功");
        },

        /** 跳转至详情页 */
        handleViewOrder(row){
            const orderNo = row.orderNo;
            // 需要另新增一个标签页
            this.$router.push({path:'/doc/settlebill/order/' + orderNo,query:{orderNo:orderNo, date:new Date().getTime()}})
        },
    }
}
</script>
